<template>
  <el-table
    :data="list"
    border
    table-layout="auto"
    cell-class-name="align"
    header-row-class-name="align"
  >
    <el-table-column label="编号" prop="id" />
    <el-table-column label="资源名称" prop="name" />
    <el-table-column label="资源路径" prop="url" />
    <el-table-column label="描述" prop="description" />
    <el-table-column label="添加时间" prop="createTime">
      <template #default="{ row }">
        <span>{{ dateFormat(row.createTime) }}</span></template
      >
    </el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <div class="page">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </div>
  </ElConfigProvider>
</template>
<script setup lang='ts'>
import { ref } from "@vue/reactivity";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { resourceListApi } from "./api/api";
import { dateFormat } from "@/utils";
import { reactive } from "vue";
import useTable from "@/hooks/useTable";

const id = reactive({
  id: 0,
});
const {
  list,
  pageNum,
  pageSize,
  total,
  pageChangeHandle,
  pageSizeChangeHandle,
} = useTable(resourceListApi, id);
</script>
<style lang="less" scoped>
:deep(.align) {
  .cell {
    text-align: center !important;
    font-size: 12px;
  }
}
.page {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>